<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>

  <!-- 

-->
  <script>
    /* 创建10个a标签，点击弹出相对的标签序号 */
    // let i, a;
    // for (i = 0; i < 10; i++) {
    //  setTimeout(()=>{
    //   a = document.createElement("a");
    //   a.innerHTML = "我是第" + (i + 1) + "个a标签";
    //   /* click什么时候点击什么时候触发  但是i是全局变量，所以点击的时候会输出最后一个i的值 */
    //   a.addEventListener("click", (e) => {
    //     e.preventDefault();
    //     alert(`我是第${i} 个a标签`); //10
    //   });
    //   document.body.appendChild(a);
    //  })
    // }

    // 改进版
    // let i;
    /*
        把let i 放进for循环里面，这样每次遍历的时候i都是一个块级作用域的变量。
        这样就不会出现点击的时候输出最后一个i的值了。
    */
    for (let i = 0; i < 10; i++) {
      //每次遍历都是一个块级作用域的变量
      a = document.createElement("a");
      a.innerHTML = "我是第" + (i + 1) + "个a标签";
      a.addEventListener("click", (e) => {
        e.preventDefault();
        alert(`我是第${i + 1} 个a标签`); //弹出对应的标签序号
      });
      document.body.appendChild(a);
    }
  </script>
</html>
